<template>
    <div class="content">
        <div class="img">
            <img src="@/assets/images/success.png" alt="">
        </div>
        <p class="p1">开通成功</p>
        <p class="p2">VIP有效期{{userinfo.borrowUserVo ? userinfo.borrowUserVo.beginDate : ''}}至{{userinfo.borrowUserVo ? userinfo.borrowUserVo.endDate : ''}}</p>
        <div class="open" @click="popupUp">
            打开【每日听书】小程序
        </div>
        <div class="download">
            <a href="http://donghang.rz158.com/html/html_rource_bl/html/client/app.html">
            下载【懂行】APP
            </a>
        </div>
        <mt-popup
            v-model="popupVisible"
            popup-transition="popup-fade">
            <div class="popup">
                <div class="back" @click='popupGo'>
                    <img src="@/assets/images/back-icon.png" alt="">
                </div>
                <div class="img">
                    <img src="@/assets/images/tingshu-qrcode.png" alt="">
                </div>
                <div class="explain">
                    长按识别二维码<br>
                    打开【每日听书】小程序
                </div>
            </div>
        </mt-popup>
    </div>
</template>
<script>
import { getMyListenBooks } from "@/utils/api.js"

export default {
    data() {
        return {
            popupVisible: false,
            userinfo: {
                borrowUserVo: {}
            }
        }
    },
    mounted() {
        this.getListenBookVip()
    },
    methods:{
        getListenBookVip() {
            const data = {
                uid: this.$route.query.uid
            }
            getMyListenBooks({data}).then(res => {
                this.userinfo.borrowUserVo = res.data.result.borrowUserVo
            })
        },
        popupGo() {
            this.popupVisible = false
        },
        popupUp() {
            this.popupVisible = true
        }
    }
}
</script>
<style lang="scss" scoped>
.content{
    overflow: hidden;
}
.img{
    width: 1.3rem;
    height: 1.14rem;
    margin: 1.18rem auto 0;
    img{
        width: 100%;
        height: 100%;
    }
}
.p1{
    margin-top: 0.3rem;
    text-align: center;
    color: #282828;
    font-size: 0.35rem;
    line-height: 0.28rem;
}
.p2{
    margin-top: 0.3rem;
    text-align: center;
    color: #707070;
    font-size: 0.3rem;
    line-height: 0.26rem;
}
.open{
    width: 5rem;
    height: 0.8rem;
    border: 0.01rem solid #e81f18;
    color: #e81f18;
    text-align: center;
    line-height: 0.8rem;
    margin: 2.4rem auto 0;
    // font-weight: 600;
    font-size: .3rem;
    border-radius: 0.08rem;
}
.download{
    width: 5rem;
    height: 0.8rem;
    border: 0.01rem solid #e81f18;
    text-align: center;
    line-height: 0.8rem;
    margin: 0.4rem auto 0;
    font-size: .3rem;
    // font-weight: 600;
    border-radius: 0.08rem;
    a{
        display: block;
        width: 100%;
        height: 100%;
        color: #e81f18;
    }
}
.popup{
    width: 5.6rem;
    height: 3.68rem;
    border-radius: 0.1rem;
    overflow: hidden;
    position: relative;
}
.popup .img{
    width: 2.2rem;
    height: 2.1rem;
    margin: 0.2rem auto 0.2rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.explain{
    line-height: 0.45rem;
    font-size: 0.3rem;
    text-align: center;
    opacity: .8;
}
.back{
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
